<template>
  <div class="status-main">
    <div class="status-top">
      <div class="right" @click="toUrl(msg)" v-if="msg">
        <img :src="imgsrc" alt="" /><span>{{ msg }}</span>
      </div>
    </div>
    <div class="status-middle">
      <router-view></router-view>
    </div>
    <div class="status-bottom">
      <div class="top">
        Copyright © 2020 OPENATOM FOUNDATION. All rights reserved.
        开放原子开源基金会版权所有
      </div>
      <div class="bot">
        <span>京ICP备2020036654号-1</span
        ><img src="../assets/images/china.png" alt="" /><span
          >京公网安备 11010801433219号</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgsrc: "",
      msg: "",
    };
  },
  watch: {
    $route: {
      handler(val) {
        this.changeUrl(val.meta.nologin);
      },
      immediate: true,
    },
  },
  methods: {
    changeUrl(url) {
      if (url == "noLogin") {
        this.imgsrc = require("../assets/images/statusBarSearch.png");
        this.msg = "查询中心";
      } else if (url == "logining") {
        this.imgsrc = require("../assets/images/switch.png");
        this.msg = "退出";
      } else {
        this.imgsrc = "";
        this.msg = "";
      }
    },
    toUrl(val) {
      if (val == "退出") {
        sessionStorage.removeItem("userContent");
      }
      this.$router.push(val == "查询中心" ? "/login" : "/mainPlay");
    },
  },
};
</script>
<style lang="less" scoped>
.status-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .status-top {
    height: 72px;
    background: linear-gradient(270deg, #4d5053 0%, #232324 100%);
    opacity: 0.9;
    position: fixed;
    text-align: right;
    width: 100%;
    z-index: 999;
    .right {
      line-height: 72px;
      color: #fff;
      margin-right: 30px;
      img {
        width: 26px;
        height: 26px;
        margin-right: 8px;
      }
      &:hover {
        cursor: pointer !important;
      }
    }
  }
  .status-middle {
    flex: 1;
    background-color: #eff4ff;
    padding-top: 72px;
    padding-bottom: 60px;
  }
  .status-bottom {
    height: 64px;
    background-color: #eff4ff;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #000000;
    opacity: 0.6;
    text-align: center;
    padding: 12px 0px;
    border-top: 0.25px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    .bot {
      img {
        width: 16px;
      }
    }
  }
}
</style>
